<template>
	<view class="root">
		<view class="container">
		
		<!-- 		<u-dropdown :border-bottom="true">
					<u-dropdown-item v-model="classesIndex" @change="change" :title="classesValue" :options="classesList"></u-dropdown-item>
				</u-dropdown> -->
				
				<view @click="classesShow = true" class="classes-view">
					<text class="title">{{classesValue}}</text>
					<u-icon name="arrow-down-fill" size="16"></u-icon>
				</view>

				<scroll-view class="content-view" scroll-y="true">
					<u-grid :col="3" :border="false" v-if="classesIndex !== -1">
						<u-grid-item v-for="(item,index) in childrenList" @click="itemClick(item, index)" :key="index">
							<children-info-view :name="item.childrenName" :imgUrl="item.imgUrl"
								:gender="item.gender" :gray="item.checkStatus === 1 ? false: true"
								:state="checkState(item)"
								>
							</children-info-view>
							<checkbox v-show="showAction"  :value="item.id" class="check-view" :checked="item.check" color="#DA473A"/>
<!-- 							<view style="display: flex;flex-direction: column;">
								<view>
									{{item.childrenName}} {{ checkState(item) }}1
								</view>
								<u-checkbox  v-show="showAction" shape="circle" class="check-view"
									active-color="#DA473A"
									v-model="item.check">
								</u-checkbox >
							</view> -->
						</u-grid-item>
					</u-grid>
				</scroll-view>
				
		<!-- 		<fab v-if="!showAction" :content="content" @fabClick="fabClick" @trigger="trigger"></fab>
				<view v-if="showAction" class="fix-view">
					<u-button type="primary" size="medium" @click="checkClick">确认</u-button>
					<u-button type="primary" size="medium" @click="cancelClick">取消</u-button>
				</view>	 -->	
				
				<u-select v-model="classesShow" :default-value="[classesIndex]" :list="classesList" title="选择班级" @confirm="classesConfirm"></u-select>
			</view>
			<view class="action-view">
				<text v-if="!showAction" @click="checkTypeClick(0)">签到</text>
				<text v-else @click="checkClick()">确认</text>
				
				<text v-if="!showAction" @click="checkTypeClick(1)">签退</text>
				<text v-else @click="cancelClick()">取消</text>
				
			</view>
	</view>

</template>

<script>
	import { getCheckRecord, mulitCheckIn, mulitCheckOut, mulitCheckInV2 } from '@/api/check.js'
	import ChildrenInfoView from '@/components/children-info-view.vue'
	import Fab from '@/components/fab.vue'
	import dictMixin from '@/mixins/dict.js'
	//宝宝健康状态 0 健康 1 不健康
	const CHILDREN_HEALTH = 0;
	const CHILDREN_UNHEALTH = 1;
 	export default {
		mixins: [dictMixin],
		components: {
			ChildrenInfoView,
			Fab
		},
		data() {
			return {
				classesShow: false,
				
				childrenCheckList: [],
				classesIndex: 0,
				classesValue: '',
				classesList: [],
				childrenList: [],
				
				showAction: false,
				content: [
					{
						text: '签到'
					},
					{
						text: '签退'
					},
				],
				// 0签到 1签退
				checkType: 0,
			}
		},
		computed: {
			channel() {
				return getApp().globalData.channel;
			}
		},
		onLoad() {
			this.childrenCheck = this.dict.childrenCheck;
			console.log(this.childrenCheck);
		},
		onShow() {
			uni.showLoading({})
			this.getChildren();
		},
		methods: {
			getChildren() {
				getCheckRecord().then(res => {
					console.log(res);
					uni.hideLoading();
					let list = [];
					for (let index in res.data) {
						let item = {
							label: res.data[index].classesName,
							value: index
						}
						list.push(item)
					}
					this.classesList = list;
					this.childrenCheckList = res.data;
					let length = this.childrenCheckList.length;
					if (length === 0) {
						this.$u.toast('暂时没有班级信息');
					}
					if (parseInt(this.classesIndex + 1) > parseInt(length)) {
						this.classesIndex = 0;
					}

					if (parseInt(length) === 0) {
						this.classesIndex = -1;
					}
					if (this.classesIndex >= 0) {
						this.classesValue = this.classesList[this.classesIndex].label;
						this.childrenList = this.childrenCheckList[this.classesIndex].childrenList;
					}
				}).catch(error => {
					uni.hideLoading();
				})
			},
			
			change(index) {
				this.classesIndex = parseInt(index);
				this.classesValue = this.classesList[index].label;
				this.childrenList = this.childrenCheckList[index].childrenList;
				this.showAction = false;
			},
			
			classesConfirm(res) {
				let index = parseInt(res[0].value);
				this.classesIndex = parseInt(index);
				this.classesValue = this.classesList[index].label;
				this.childrenList = this.childrenCheckList[index].childrenList;
				this.showAction = false;
			},
			
			itemClick(item, index) {
				if (!this.showAction) {
					if (item.checkStatus === this.childrenCheck.CHILDREN_CHECK_REJECT ||
						item.checkStatus === this.childrenCheck.CHILDREN_CHECK_SICK ||
						item.checkStatus === this.childrenCheck.CHILDREN_CHECK_HOME
						) {
							return;
						}
					this.$u.route({
						url: 'pages_sub/check/check-detail-page',
						params: item,
					})
				} else {
					item.check = !item.check;
					this.childrenList.splice(index, 1, item);
				}
			},
			
			fabClick(res) {
				console.log(res);
			},
			
			trigger(e) {
				console.log(e);
				this.checkType = e.index;
				this.showAction = true;
				this.filter();
			},
			
			checkTypeClick(index) {
				this.checkType = index;
				this.showAction = true;
				this.filter();
			},
			
			filter() {
				let list = [];
				for (let index in this.childrenCheckList[this.classesIndex].childrenList) {
					let item = this.childrenCheckList[this.classesIndex].childrenList[index];
					item.check = false
					if (this.checkType === 0) {
						if (item.checkStatus === this.childrenCheck.CHILDREN_CHECK_NO
							||item.checkStatus === this.childrenCheck.CHILDREN_CHECK_OUT) {
								list.push(item);
						}
					} else if (this.checkType === 1) {
						if (item.checkStatus === this.childrenCheck.CHILDREN_CHECK_IN) {
								list.push(item);
						}
					}
				}
				this.childrenList = list;
			},
			
			//批量 签到签退
			checkClick() {
				let childrenIds = '';
				for (let index in this.childrenList) {
					let item = this.childrenList[index];
					if (item.check) {
						childrenIds += `,${item.childrenId}`;
					}
				}
				if (childrenIds.length > 0) {
					childrenIds = childrenIds.substring(1);
				}
				uni.showLoading({});
				if (this.checkType === 0) {
					if (this.channel === 'xm') {
						mulitCheckInV2(childrenIds).then(res => {
							uni.hideLoading();
							this.childrenCheckList = res.data;
							this.cancelClick();
						})
					} else {
						mulitCheckIn(childrenIds).then(res => {
							uni.hideLoading();
							this.childrenCheckList = res.data;
							this.cancelClick();
						})
					}
				} else if (this.checkType === 1) {
					mulitCheckOut(childrenIds).then(res => {
						uni.hideLoading();
						this.childrenCheckList = res.data;
						this.cancelClick();
					})
				}
			},
			//取消
			cancelClick() {
				this.change(this.classesIndex);
			},
			checkState(data) {
				// return data;
				if (data.checkStatus === 5) {
					return '自定义';
				} else if (data.checkStatus === 4){
					if (data.healthyStatus === 1) {
						return '病假';
					} else {
						return '事假';
					}
				} else if (data.checkStatus === 1){
				  if (data.healthyStatus === 0){
					return '健康';
				  }
				  if (!this.$u.test.isEmpty(data.sickName)){
					return data.sickName;
				  }
				  return '不健康';
				} else if (data.checkStatus === 3){
				  if (!this.$u.test.isEmpty(data.sickName)){
					return data.sickName;
				  }
				  return '拒入';
				} else if (data.checkStatus === 2){
				  return '离园';
				} else{
				  return '缺席';
				}
			}
			// _getCheckState(data) {
			// 	if (data.checkStatus === this.childrenCheck.CHILDREN_CHECK_SICK){
			// 	  return '请假';
			// 	}else if (data.checkStatus === this.childrenCheck.CHILDREN_CHECK_IN){
			// 	  if (data.healthyStatus === CHILDREN_HEALTH){
			// 		return '健康';
			// 	  }
			// 	  if (!this.$u.test.isEmpty(data.sickName)){
			// 		return data.sickName;
			// 	  }
			// 	  return '不健康';
			// 	}else if (data.checkStatus === this.childrenCheck.CHILDREN_CHECK_REJECT){
			// 	  if (!this.$u.test.isEmpty(data.sickName)){
			// 		return data.sickName;
			// 	  }
			// 	  return '拒入';
			// 	}else if (data.checkStatus === this.childrenCheck.CHILDREN_CHECK_OUT){
			// 	  return '离园';
			// 	}else{
			// 	  return '缺席';
			// 	}
			// }
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: $app-page-bg-color;
	}
	.root{
		height: 100%;
		
		.container{
			height: 100%;
			display: flex;
			flex-direction: column;
			position: relative;
			padding-left: 30rpx;
			padding-right: 30rpx;
			
			> .classes-view{
				margin-top: 30rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 65rpx;
			}
			
			> .content-view{
				margin-top: 23rpx;
				margin-bottom: 130rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				overflow: scroll;
			}
		}
		
		.action-view{
			position: fixed;
			height: 100rpx;
			bottom: 0;
			background-color: #FFFFFF;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 30rpx;
			
			box-shadow: 0px -1px 10px 0px rgba(138, 138, 138, 0.2);
		}
	}


	.fix-view{
		display: flex;
		flex-direction: row;
		
		position: absolute;
		bottom: 180rpx;
		width: 100%;
	}
	
	.check-view{
		position: absolute;
		top: 20rpx;
		right: 10rpx;
		transform: scale(0.7);
		border-radius: 20rpx;
	}
	/deep/ .uni-checkbox-input {
		border-radius: 50%;
	}
</style>
